<nz-tabset>
  <nz-tab nzTitle="进行中"><!-- 标签页 - 进行中 -->
    <div>
      <div nz-row nzType="flex" nzJustify="space-between">
        <div nz-col nzSpan="4">
          <a (click)="addEmptyRow()"><i nz-icon nzType="plus" nzTheme="outline"></i>&nbsp;新增行</a>&nbsp;
          <a (click)="refreshTable()"><i nz-icon nzType="sync" nzTheme="outline"></i>&nbsp;刷新</a>&nbsp;
        </div>

        <div nz-col nzSpan="6">
          <a (click)="detailService.movePrevious()"><svg t="1584800340435" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4607" width="14" height="14"><path d="M549.84704 309.80096l328.69376 328.704c20.91008 20.91008 20.91008 54.80448 0 75.70432-20.89984 20.89984-54.80448 20.89984-75.70432 0L512 423.36256 221.16352 714.19904c-20.91008 20.89984-54.80448 20.89984-75.70432 0-20.91008-20.89984-20.91008-54.79424 0-75.70432l328.69376-328.704c10.45504-10.4448 24.14592-15.6672 37.84704-15.6672S539.40224 299.35616 549.84704 309.80096z" p-id="4608" fill="#116fbf"></path></svg>上移</a>&nbsp;
          <a (click)="detailService.moveNext()"><svg t="1584800430244" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4805" width="14" height="14"><path d="M512 729.86624c-13.70112 0-27.40224-5.23264-37.84704-15.6672l-328.69376-328.704c-20.91008-20.91008-20.91008-54.80448 0-75.70432 20.89984-20.89984 54.79424-20.89984 75.70432 0L512 600.63744l290.83648-290.83648c20.91008-20.89984 54.80448-20.89984 75.70432 0 20.91008 20.89984 20.91008 54.79424 0 75.70432l-328.69376 328.704C539.40224 724.64384 525.70112 729.86624 512 729.86624z" p-id="4806" fill="#116fbf"></path></svg>下移</a>&nbsp;
          <a (click)="detailService.moveFirst()"><svg t="1584800458080" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5003" width="14" height="14"><path d="M157.72672 552.6528c-20.20352-20.20352-20.20352-52.95104 0-73.1648L475.42272 161.792c10.09664-10.0864 23.33696-15.14496 36.57728-15.14496s26.48064 5.04832 36.57728 15.14496l317.68576 317.696c20.20352 20.21376 20.20352 52.96128 0 73.1648s-52.96128 20.20352-73.17504 0L512 271.55456 230.90176 552.6528C210.688 572.84608 177.93024 572.84608 157.72672 552.6528zM548.57728 471.33696C538.48064 461.25056 525.24032 456.192 512 456.192s-26.48064 5.05856-36.57728 15.14496L157.72672 789.03296c-20.20352 20.21376-20.20352 52.97152 0 73.17504s52.96128 20.20352 73.17504 0L512 581.09952l281.09824 281.09824c20.21376 20.20352 52.97152 20.20352 73.17504 0s20.20352-52.96128 0-73.17504L548.57728 471.33696z" p-id="5004" fill="#116fbf"></path></svg>置顶</a>&nbsp;
          <a (click)="detailService.moveLast()"><svg t="1584800478394" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5201" width="14" height="14"><path d="M866.26304 471.3472c20.21376 20.20352 20.21376 52.95104 0 73.1648L548.57728 862.208c-10.09664 10.0864-23.33696 15.14496-36.57728 15.14496s-26.48064-5.04832-36.57728-15.14496L157.73696 544.512c-20.21376-20.21376-20.21376-52.96128 0-73.1648 20.20352-20.20352 52.96128-20.20352 73.1648 0L512 752.44544 793.09824 471.3472C813.30176 451.15392 846.06976 451.15392 866.26304 471.3472zM475.42272 552.66304c10.09664 10.0864 23.33696 15.14496 36.57728 15.14496s26.48064-5.05856 36.57728-15.14496l317.68576-317.68576c20.21376-20.21376 20.21376-52.97152 0-73.17504-20.20352-20.20352-52.96128-20.20352-73.1648 0L512 442.90048 230.90176 161.80224c-20.20352-20.20352-52.96128-20.20352-73.1648 0-20.21376 20.20352-20.21376 52.96128 0 73.17504L475.42272 552.66304z" p-id="5202" fill="#116fbf"></path></svg>置底</a>&nbsp;
        </div>
      </div>
    </div>&nbsp;


    <!-- 内容列的模糊查询 -->
    <nz-dropdown-menu #filterDropdown_searchContent="nzDropdownMenu">
      <div class="search-box">
        <input type="text" nz-input placeholder="模糊查询" [(ngModel)]="vari.searchValue_content" />
        <button nz-button nzSize="small" nzType="primary" (click)="searchContent()" class="search-button">
          执行过滤
        </button>
        <button nz-button nzSize="small" (click)="resetFilterContent()">清除过滤</button>
      </div>
    </nz-dropdown-menu>

    <nz-table #zorroTable nzBordered [nzData]="detailService.tableData_onGoing" nzSize="small" nzPageSize="20000">
      <thead>
        <tr class="strip">
          <th nzWidth="60px">#</th><!-- 序号列 -->
          <ng-container *ngFor="let item of vari.tableStyle"><!-- 遍历样式表构建列头，不创建immutable列 -->
            <ng-container *ngIf="!item.immutable">

            <th *ngIf="item.field_name !== 'content'" [nzWidth]="item.width_percent_str"
              [nzAlign]="detailService.tableStyleMap[item.field_name].align_header">
              {{ item.text }}
            </th>

            <th *ngIf="item.field_name === 'content'" nzCustomFilter [nzWidth]="item.width_percent_str"
              [nzAlign]="detailService.tableStyleMap[item.field_name].align_header">
              {{ item.text }}
                <!-- 过滤 - 输入 - 模糊查询 -->
                <i *ngIf="item.field_name === 'content'"
                id="filterDropdownMenu"
                nz-th-extra
                class="ant-table-filter-icon"
                nz-icon
                nz-dropdown
                #dropdown="nzDropdown"
                nzType="search"
                [nzDropdownMenu]="filterDropdown_searchContent"
                [class.ant-table-filter-open]="dropdown.nzVisible"
                [ngStyle]="{'ant-table-filter-open': visible_filterDropdownMenu}"
                nzTrigger="click"
                nzPlacement="bottomRight"
                [nzClickHide]="false"
                nzTableFilter
              ></i>
            </th>
          </ng-container>
          </ng-container>
        </tr>
      </thead>

      <tbody>
        <tr *ngFor="let rowData of zorroTable.data;let rowIndex=index" (dblclick)="startEdit(rowIndex,rowData['uuid'],$event)"
          (mouseover)="mouseOver(mouseOverUUID = rowData.uuid)" [class.strip]="rowIndex%2 !== 0"
            [class.selectedRow]="rowIndex === detailService?.selectedRow?.rowIndex"
          (click)="onClick_dataRow(rowIndex,rowData?.uuid)">
          <td><!-- 序号 + 图标列 -->
            <!-- 序号列 - 显示状态下的两个图标：删除、复制 -->
            <div *ngIf="!detailService.cache.detail[rowData['uuid']].edit;else editIconTpl">
              <div *ngIf="rowData.uuid === mouseOverUUID;else rowIndexTpl" nz-row nzType="flex" nzJustify="space-between">
                <div nz-col nzSpan="10">
                  <a
                    nz-popconfirm
                    nzPopconfirmTitle="您确定要删除当前行?"
                    (nzOnConfirm)="deleteRow(rowIndex,rowData['uuid'])"
                    (nzOnCancel)="cancelDeleteRow()"
                    nzPopconfirmPlacement="top"
                  ><i nz-icon nzType="delete" nzTheme="outline"></i></a>
                </div>

                <div nz-col nzSpan="10">
                  <a
                    (click)="setFinished(rowIndex,rowData['uuid'])"><i nz-icon nzType="check" nzTheme="outline"></i></a>
                    <!-- 由于空间有限只能放两个图标，一开始是：删除、编辑，后来修改为：删除、复制，通过双击行开启编辑状态 -->
                  <!-- <a (click)="startEdit(rowIndex,rowData['uuid'])"><i nz-icon nzType="edit" nzTheme="outline"></i></a> -->
                </div>
              </div>
              <ng-template #rowIndexTpl>{{rowIndex+1}}</ng-template>
            </div>

            <!-- 序号列 - 编辑状态下的两个图标：取消、保存 -->
            <ng-template #editIconTpl>
              <div nz-row nzType="flex" nzJustify="space-between">
                <div nz-col nzSpan="10"><!-- 取消编辑 nz-tooltip nzTooltipTitle="取消编辑" -->
                  <a
                    (click)="cancelEdit(rowIndex,rowData['uuid'])"><i nz-icon nzType="redo" nzTheme="outline"></i></a>
                </div>


                <div nz-col nzSpan="10"><!-- 保存 nz-tooltip nzTooltipTitle="保存" -->
                  <a
                    (click)="saveEdit(rowIndex,rowData['uuid'])"><i nz-icon nzType="save" nzTheme="outline"></i></a>
                </div>
              </div>
            </ng-template>
          </td>

          <!-- 序号之后的所有数据列 -->
          <ng-container *ngFor="let tsRow of vari.tableStyle">
            <!-- <td *ngIf="!tsRow.immutable" [nzAlign]="colContentAlign(tsRow.field_name)"> -->
            <td *ngIf="!tsRow.immutable" [nzAlign]="detailService.tableStyleMap[tsRow.field_name].align_cell">
              <!-- 显示模式 -->
              <ng-container *ngIf="!detailService.cache.detail[rowData['uuid']].edit;else editTpl">

                <ng-container *ngIf="tsRow.date_pipe;else plainShowTpl">
                  {{ rowData[tsRow.field_name] | date:tsRow.date_formatter }}
                </ng-container>
                <ng-template #plainShowTpl>
                  {{ convertRaw2Show(rowData,tsRow) }}
                </ng-template>

              </ng-container>

              <ng-template #editTpl><!-- 编辑模式，使用 switch 枚举用于编辑的控件类型 -->

                <span [ngSwitch]="tsRow.ctl_type">
                <p *ngSwitchCase="'optsEnum'"><!-- 下拉选择 - 枚举 -->
                  <nz-select nzShowSearch nzAllowClear nzPlaceHolder="" [(ngModel)]="detailService.cache.detail[rowData.uuid].data[tsRow.field_name]" style="width: 100%;">
                    <nz-option *ngFor="let item of opts_enum[tsRow.field_name]" [nzLabel]="item.label" [nzValue]="item.value"></nz-option>
                  </nz-select>

                </p>
                <p *ngSwitchCase="'date'"><!-- 日期控件  [nzFormat]="'yyyy-MM-dd HH:mm:ss'" -->
                  <nz-date-picker [nzFormat]="'yyyy-MM-dd'" [(ngModel)]="detailService.cache.detail[rowData.uuid].data[tsRow.field_name]"></nz-date-picker>
                </p>
                <p *ngSwitchDefault><!-- 常规的 input -->
                  <input type="text" nz-input [(ngModel)]="detailService.cache.detail[rowData.uuid].data[tsRow.field_name]"
                    (ngModelChange)="inputChange(detailService.cache.detail[rowData.uuid].data,tsRow)"/>
                </p>

                <p *ngSwitchCase="'locked'"><!-- 被锁定 -->
                  <!-- {{ detailService.cache.detail[rowData.uuid].data[tsRow.field_name] }} -->
                  <!-- {{ resolveFormula(rowData,tsRow) }} -->
                  {{ breadField.showLocked(rowData,tsRow) }}
                </p>

                </span>

              </ng-template>
            </td>
          </ng-container>

        </tr>
      </tbody>

    </nz-table>
  </nz-tab>

  <nz-tab nzTitle="已完成"><!-- 标签页 - 已完成 -->
    <nz-table #tableFinished nzBordered [nzData]="detailService.tableData_finished" nzSize="small">
      <thead>
        <tr class="strip">
          <th nzWidth="60px">#</th><!-- 序号列 -->
          <ng-container *ngFor="let tsRow of vari.tableStyle"><!-- 遍历样式表构建列头，不创建immutable列 -->
            <th *ngIf="!tsRow.immutable" [nzWidth]="tsRow.width_percent_str"
              [nzAlign]="detailService.tableStyleMap[tsRow.field_name].align_header">
              {{ tsRow.text }}
            </th>
          </ng-container>
        </tr>
      </thead>

      <tbody>
        <tr *ngFor="let rowData of tableFinished.data;let rowIndex=index" (dblclick)="startEdit(rowIndex,rowData['uuid'],$event)"
          (mouseover)="mouseOver(mouseOverUUID = rowData.uuid)" [class.strip]="rowIndex%2 !== 0">
          <td><!-- 悬停图标 + 序号 -->
              <div *ngIf="rowData.uuid === mouseOverUUID;else rowIndexTpl" nz-row nzType="flex" nzJustify="space-between">
                <div nz-col nzSpan="20">
                  <a
                    nz-popconfirm
                    nzPopconfirmTitle="您确定要调整为进行中?"
                    (nzOnConfirm)="turn2Ing(rowIndex,rowData['uuid'])"
                    nzPopconfirmPlacement="top"
                  ><i nz-icon nzType="redo" nzTheme="outline"></i></a>
                </div>
              </div>
              <ng-template #rowIndexTpl>{{rowIndex+1}}</ng-template>
          </td>

          <!-- 序号之后的所有数据列 -->
          <ng-container *ngFor="let tsRow of vari.tableStyle">
            <td *ngIf="!tsRow.immutable" [nzAlign]="detailService.tableStyleMap[tsRow.field_name].align_cell">

                <ng-container *ngIf="tsRow.date_pipe;else plainShowTpl">
                  {{ rowData[tsRow.field_name] | date:tsRow.date_formatter }}
                </ng-container>

                <ng-template #plainShowTpl>
                  {{ convertRaw2Show(rowData,tsRow) }}
                </ng-template>

            </td>
          </ng-container>

        </tr>
      </tbody>
    </nz-table>
  </nz-tab>
</nz-tabset>




<p-toast [style]="{marginTop: '80px'}" styleClass="primeng-custom-toast" key="custom" position="top-right"></p-toast>
